<template>
  <div id="topicCheck">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>

    <div class="table-conBtn">
      <el-button v-permission="'wh:system:topicContentExamined:adopt'" type="warning" icon="el-icon-check" @click="handlePass()">
        通过
      </el-button>

      <el-button v-permission="'wh:system:topicContentExamined:noadopt'" type="warning" icon="el-icon-close" plain @click="notPass()">
        不通过
      </el-button>

      <freshCom @searchList="searchList"></freshCom>

      <selectColumn ref="selectCum" @setColumn="setColumns" :nameList="columnList"></selectColumn>
    </div>

    <!--下部table-->
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange" max-height="490" ref="table">
      
      <el-table-column type="selection" width="55" :selectable="selectAble"></el-table-column>
      
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.nickName" label="昵称" prop="nickName" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.user.nickName }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.dpAccount" label="大鹏号" prop="dpAccount" min-width="70">
        <template slot-scope="scope">
          {{ scope.row.user.dpAccount }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.topicIds" label="所属话题" prop="topicIds" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.postSource.postSourceName }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.contentType" label="类型" min-width="70">
        <template slot-scope="scope">
          <el-tag type="info">
            {{ scope.row.contentType === 'TEXT' ? '图文': '短视频' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.content" label="文字内容" prop="content" min-width="100">
        <template slot-scope="scope">
          <span v-html="filterContent(scope.row)" @click="showDetail(scope.row)"></span>
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.imgs" label="视图内容" min-width="100">
        <template slot-scope="scope">
          <!--图片-->
          <span v-if="scope.row.video === null || scope.row.video.vid === null">
            <listImgShow :imgInfo="scope.row.imgs"></listImgShow>
          </span>
          <!--视频-->
          <span v-else class="img-box" @click="videoPlay(scope.row.video.vid)">
            <div class="img-inner-box">
              <el-image fit="contain" :src="scope.row.imgs[0]"></el-image>
            </div>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="columnSHow.createdDate"
        label="创建时间"
        prop="createdDate"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.createdDate }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.userType" label="用户属性" prop="userType" min-width="80">
        <template slot-scope="scope">
          <el-tag type="info">
            {{ scope.row.userType === 'USER' ? '用户': '马甲' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.machineAuditingTime" label="机审时间" prop="machineAuditingTime" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.verifyRecord.machineAuditing.auditingTime }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.machineAuditingState" label="机审结果" prop="machineAuditingState" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.verifyRecord.machineAuditing.auditingState === 'PASS'" class="tag-span primary">通过</span>
          <span v-if="scope.row.verifyRecord.machineAuditing.auditingState === 'UNPASS'" class="tag-span danger warning">未通过</span>
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.manualAuditingState" label="人审结果" prop="manualAuditingState" min-width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'PASS'" class="tag-span primary">通过</span>
          <span v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'UNCHECKED'" class="tag-span warning">未审核</span>
          <span v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'UNPASS'" class="tag-span danger hand">未通过</span>
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.manualAuditingTime" label="人审时间" prop="manualAuditingTime" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.verifyRecord.manualAuditing.auditingTime }}
        </template>
      </el-table-column>

      <el-table-column v-if="columnSHow.auditingUser" label="审核人" prop="auditingUser" min-width="70">
        <template slot-scope="scope">
          <span v-if="scope.row.verifyRecord.manualAuditing.auditingUser.nickName"> {{ scope.row.verifyRecord.manualAuditing.auditingUser.nickName }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="160">
        <template slot-scope="scope">

          <el-button v-permission="'wh:system:topicContentExamined:adopt'" v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'UNCHECKED'" type="text" @click="handleSinglePass(scope.row.id)">
            通过
          </el-button>
          
          <el-button v-permission="'wh:system:topicContentExamined:noadopt'" v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'UNCHECKED'" type="text" @click="handlNotPassWord(scope.row.id)">
            不通过
          </el-button>
          
          <el-button v-permission="'wh:system:topicContentExamined:preview'" v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'PASS' || scope.row.verifyRecord.manualAuditing.auditingState === 'UNCHECKED'" type="text" @click="showDetail(scope.row)">
            查看详情
          </el-button>

          <el-button v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'PASS'" type="text" @click="handlDel(scope.row.id)">
            删除
          </el-button>

          <el-button v-if="scope.row.verifyRecord.manualAuditing.auditingState === 'UNPASS'" type="text" @click="handlNotPass(scope.row)">
            未通过理由
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-全局组件-->
    <pageCom :searchParams="searchParams" :total="total" @searchList="searchList"></pageCom>
    
    <dialogDetailCom v-if="dialogData.isShow" :dialog-data="dialogData"></dialogDetailCom>
    
    <!-- 不通过理由弹窗 -->
    <del-dialog :del-dialog-data="delDialogData" @reasonDel="failRequest"></del-dialog>
    
    <!--播放视频组件-->
    <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
  </div>
</template>

<script>
import { getTopicCheckList, unPass, pass } from '@/api/topicManagement'
import topSearch from '@component/contentCheck/topicCheck/topSearch' // 上部搜索条件
import dialogDetailCom from '@common/dialogDetailCom' // 详情-弹窗-公共组件
import showVideo from '@common/showVideo'
import delDialog from '@common/delDialog' // 不通过理由弹窗
import { filterCon, getVideoPara } from '@utils/pubFunction' // 内容筛选
import { getVideoImg } from '@utils/getFaceImg'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { columnMixin } from '@/mixins/columnShowHide'

export default {
  name: 'topicCheck',
  msg: '话题内容审核',
  mixins: [saveScrollMixins, columnMixin],
  components: {
    topSearch,
    dialogDetailCom,
    showVideo,
    delDialog
  },
  data() {
    return {
      loading: true,
      total: 0,
      notdisabled: true, // 不通过按钮禁用状态
      tableData: [], // table内容
      tableTemp: [], // table替代
      tempSize: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        manualAuditingState: '', // 人审结果
        machineAuditingState: '', // 机审结果
        direction: '', // 排序规则
        content: '', // 内容查询
        contentType: '', // 帖子类型
        dpAccount: '', // 大鹏号
        timeType: '', // 时间类型
        auditingUserId: '', // 审核人
        userType: '', // 用户属性
        createdDateStart: '', // 开始时间
        createdDateEnd: '', // 结束时间
        createTime: []
      },

      dialogData: {
        isShow: false, // 默认隐藏
        type: '', // 类型，workDetail-作品详情，jobDetail-作业详情,lifDetail-动态详情
        id: '', // 编辑时，传递的参数
        title: ''
      },

      // 不通过
      delDialogData: {
        isShow: false,
        params: '',
        type: '不通过'
      },

      isDelete: false,

      videoData: {
        // 视频播放弹窗
        isShow: false,
        vid: ''
      },

      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      },

      multipleSelection: [],


      columnList: [
        { label: '昵称', value: 'nickName' },
        { label: '大鹏号', value: 'dpAccount' },
        { label: '所属话题', value: 'topicIds' },
        { label: '类型', value: 'contentType' },
        { label: '文字内容', value: 'content' },
        { label: '视图内容', value: 'imgs' },
        { label: '创建时间', value: 'createdDate' },
        { label: '用户属性', value: 'userType' },
        { label: '机审时间', value: 'machineAuditingTime' },
        { label: '机审结果', value: 'machineAuditingState' },
        { label: '人审结果', value: 'manualAuditingState' },
        { label: '人审时间', value: 'manualAuditingTime' },
        { label: '审核人', value: 'auditingUser' }
      ]
    }
  },

  activated() {
    this.toTableScrollHeight()
  },

  mounted() {

    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
        this.$refs['selectCum'].setChoose(this.columnAry)
      }, 1000)
    })
  },
  methods: {

    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then(
        (res) => {
          // 接口请求正常
          this.polivNum.polyvUserId = res.polyvUserId
          this.polivNum.polyvSecretKey = res.polyvSecretKey
          let n = 0
          this.tableTemp.forEach((item, index) => {
            let vid = (item.video && item.video.vid) ? item.video.vid : false
            _this.getImg(vid, index).then(
              (data) => {
                n++
                _this.setData(n)
              },
              () => {
                n++
                _this.setData(n)
              }
            )
          })
        },
        (res) => {
          // 接口请求不正常正常
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /*  符合条件后，给table赋值 */
    setData(n) {
      if (n === this.tempSize) {
        this.loading = false
        this.tableData = [...this.tableTemp]
      }
    },
    /* 获取封面图 */
    getImg(vid, index) {
      if (!vid) return Promise.resolve(false)
      let _this = this
      return getVideoImg(vid, this.polivNum).then(
        (res) => {
          _this.tableTemp[index].imgs = res
          return Promise.resolve(true)
        },
        (error) => {
          return Promise.reject(error)
        }
      )
    },
    /* 播放视频 */
    videoPlay(vid) {
      /* console.log("index-vid=" + vid); */
      if (!vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = vid
      this.videoData.isShow = true
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      getTopicCheckList(
        params,
        (response) => {
          this.loading = false
          this.tableTemp = response.rows
          this.tableData = response.rows
          this.tempSize = response.rows.length
          this.total = response.total
          this.getPolivNum()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.notdisabled = false
      if (this.multipleSelection.length === 0) {
        this.notdisabled = true
      }
    },
    selectAble(row, index) {
      if (row.verifyRecord.manualAuditing.auditingState === 'UNCHECKED') {
        return true
      } else {
        return false
      }
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return filterCon(item)
    },

    /* 获取选中数据的id集合 */
    getIds() {
      let _this = this
      let ids = []
      let muLength = this.multipleSelection.length - 1
      return new Promise((resolve, reject) => {
        _this.multipleSelection.forEach((item, index) => {
          ids.push(item.id ? item.id : null)
          if (index === muLength) {
            resolve(ids)
          }
        })
      })
    },

    /* 批量通过 */
    handlePass() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      this.multipleSelection.forEach((item) => {
        ids.push(item.id)
      })
      this.id = ids
      this.passHandle(this.id)
    },

    /* 通过单个 */
    handleSinglePass(id) {
      this.id = id
      this.passHandle([this.id])
    },

    passHandle(ids) {
      let type = this.delDialogData.type
      this.$confirm(`确定审核通过该条话题内容审核信息吗？`,'系统提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { postId: ids, remark: '', auditingState: 'PASS'}
        pass(params, (response) => {
          this.searchList()
        })
      })
    },

    /* 批量不通过 */
    notPass() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      this.multipleSelection.forEach((item) => {
        ids.push(item.id)
      })
      this.id = ids
      this.delDialogData.isShow = true
    },
    /* 不通过单个 */
    handlNotPassWord(id) {
      this.id = id
      this.delDialogData.isShow = true
    },

    // 未通过理由
    handlNotPass(row) {
      this.$confirm(`${row.verifyRecord.manualAuditing.remark}`, '未通过理由', {
        showConfirmButton: false
      }).then(() => {}).catch(() => {})
    },
    
    failRequest(reason) {
      if (this.whetherDelete) {
        this.deleteRequest(this.id, reason)
        return false
      }
      this.failMultRequest(this.id, reason)
      this.delDialogData.isShow = false
    },

    // 不通过
    failMultRequest(ids, reason) {
      let type = this.delDialogData.type
      this.$confirm(`${type}理由：${reason} 确认${type}该条信息？`,'系统提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { postId: ids, remark: reason, auditingState: 'UNPASS'}
        unPass(params, (response) => {
          this.searchList()
        })
      })
    },
    /** 删除 */
    handlDel(id) {
      this.id = id
      this.delDialogData.isShow = true
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 显示详情 */
    showDetail(item) {
      this.dialogData.type = 'topicDetail'
      this.dialogData.topicId = item.id
      this.dialogData.isShow = true
      this.dialogData.title = '话题内容审核详细'
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less">
#topicCheck {
  @import url('~@common/style/imgBox.less');
}
</style>
